<template>
  <div class="md-login">
    <div class="main">
      <div class="main-header">
        <div class="logo">
          <img src="@/assets/img/logo-four.png" />
          <!-- <span>Md</span> -->
        </div>
        <h1 class="main-title">Md&nbsp;&nbsp;通用管理系统</h1>
      </div>
      <div class="main-body">
        <el-form :model="request" :rules="rules" ref="form" label-width="0px">
          <el-form-item prop="userName">
            <el-input v-model="request.userName" prefix-icon="el-icon-user" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item prop="userPwd">
            <el-input v-model="request.userPwd" type="password" prefix-icon="el-icon-lock" placeholder="请输入密码" />
          </el-form-item>
          <!-- <el-form-item prop="code" class="captcha" v-if="captchaEnabled">
            <el-input v-model="form.code" prefix-icon="el-icon-baseball" placeholder="请输入验证码">
              <img :src="codeImg" slot="append" @click="getCodeImg" />
            </el-input>
          </el-form-item> -->
        </el-form>

        <div class="footer">
          <el-button type="primary" @click="handleSubmit()">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin } from '@/api/system/user.service.js'
export default {
  name: 'MdLoginComponent',
  data () {
    return {
      request: {
        userName: null,
        userPwd: null,
        code: '111',
        uuid: '111'
      },
      rules: {
        userName: [{ required: true, trigger: "blur", message: "请输入您的手机号" }],
        userPwd: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      // 验证码开关
      captchaEnabled: false,
      // 验证码图片
      codeImg: null
    }
  },
  mounted () {

  },
  methods: {
    handleSubmit () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return
        }

        try {
          this.$local.clear()

          const params = Object.assign({}, { ...this.request })

          const res = await userLogin(params.userName, params.userPwd, params.code, params.uuid)

          this.$local.setItem('Authorization', res.data.token)
          this.$local.setItem('user', res.data.user)

          this.$message.success('登录成功')

          await this.$sleep(1000)

          window.location.href = '/'
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.md-login {
  width: 100%;
  height: 100vh;
  min-height: 100%;
  box-sizing: border-box;
  background: url('../assets/img/login-bg.jpeg') no-repeat center;
  background-size: cover;

  .main {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 470px;
    height: 100%;
    min-height: 100%;
    margin: 0 auto auto auto;
    background: #fff;
    padding: 100px 50px 20px 50px;

    .main-header {
      padding-bottom: 20px;

      .logo {
        text-align: center;
        img {
          margin: 0 auto;
          display: block;
          width: 64px;
          height: 64px;
        }

        span {
          font-size: 25px;
          font-weight: bold;
        }
      }

      .main-title {
        padding-top: 100px;
        font-size: 15px;
        color: #333;
      }

      p {
        font-size: 12px;
      }
    }

    .main-body {
      background: #fff;
      border-radius: 10px;

      .footer {
        .el-button {
          width: 100%;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .md-login {
    .main {
      width: 100% !important;
    }
  }
}
</style>